<template>
	<view class="panel">
		<view class="head">
			<text>{{ title }}</text>
			<slot name="head-slot"></slot>
		</view>
		<slot />
	</view>
</template> 

<script>
export default {
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.panel {
	flex: 1;

	.head {
		color: #333;
		font-size: 30rpx;
		padding: 30rpx 0;
		font-weight: bold;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;
		justify-content: space-between;

		text {
			position: relative;
			padding-left: 32rpx;

			&::after {
				top: 0;
				left: 0;
				width: 6rpx;
				content: '';
				height: 100%;
				position: absolute;
				background-color: #04d48e;
			}
		}
	}
}
</style>
